<template>
    <div class="material-detail">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="物资名称">{{ material.name }}</el-descriptions-item>
        <el-descriptions-item label="物资类型">{{ material.type }}</el-descriptions-item>
        <el-descriptions-item label="当前库存">{{ material.stock }}</el-descriptions-item>
        <el-descriptions-item label="最大容量">{{ material.maxStock }}</el-descriptions-item>
        <el-descriptions-item label="储备位置">{{ material.location }}</el-descriptions-item>
        <el-descriptions-item label="库存状态">
          <el-progress 
            :percentage="(material.stock / material.maxStock) * 100" 
            :color="getStockColor(material.stock, material.maxStock)"
          />
        </el-descriptions-item>
      </el-descriptions>
  
      <div class="location-map">
        <h4>位置示意图</h4>
        <!-- 实际项目中这里应该嵌入真实地图 -->
        <div class="mock-map">
          <div class="map-point" :style="{left: '50%', top: '50%'}"></div>
          <div class="map-label">{{ material.location }}</div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Vue, Prop } from 'vue-property-decorator';
  import { Descriptions, DescriptionsItem, Progress } from 'element-ui';
  
  interface Material {
    id: string;
    name: string;
    type: string;
    stock: number;
    maxStock: number;
    location: string;
    coordinates: [number, number];
  }
  
  @Component({
    components: {
      ElDescriptions: Descriptions,
      ElDescriptionsItem: DescriptionsItem,
      ElProgress: Progress
    }
  })
  export default class MaterialDetail extends Vue {
    @Prop({ required: true }) private material!: Material;
  
    private getStockColor(stock: number, maxStock: number): string {
      const ratio = stock / maxStock;
      if (ratio < 0.3) return '#f56c6c';
      if (ratio < 0.6) return '#e6a23c';
      return '#67c23a';
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .material-detail {
    .location-map {
      margin-top: 20px;
      
      h4 {
        margin: 10px 0;
        color: #606266;
      }
      
      .mock-map {
        height: 200px;
        background-color: #f5f7fa;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        position: relative;
        
        .map-point {
          position: absolute;
          width: 12px;
          height: 12px;
          background-color: #409eff;
          border-radius: 50%;
          transform: translate(-50%, -50%);
          
          &::after {
            content: '';
            position: absolute;
            width: 24px;
            height: 24px;
            top: -6px;
            left: -6px;
            border-radius: 50%;
            background-color: rgba(64, 158, 255, 0.3);
          }
        }
        
        .map-label {
          position: absolute;
          left: 50%;
          top: 60%;
          transform: translateX(-50%);
          background-color: white;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
  </style>